import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
  render() {
    const {users,isFirst,isLoading,err} = this.props
    return (
        <div className="row">
          {
            isFirst? <h2>欢迎使用GitHub搜索，请输入关键字</h2> :
            isLoading? <h1>Loading...</h1> :
            err? <div style={{color: 'red'}}>{err}</div> :
            users.map(item => {
              return <div className="card" key={item.id}>
                  <a href={item.html_url} target="_blank" rel="noreferrer">
                      <img src={item.avatar_url} alt='avatar' style={{'width': '100px'}}/>
                  </a>
                  <p className="card-text">{item.login}</p>
              </div>
            })
          }
        </div>
    )
  }
}
